React useSyncExternalStore：精通外部状态同步

useSyncExternalStore 是 React 18 中引入的一个 React Hook，它允许你以与并发渲染兼容的方式订阅和读取外部数据源。这个 Hook 填补了 React 托管状态与外部状态（例如来自第三方库、浏览器 API 或其他 UI 框架的数据）之间的鸿沟。让我们深入了解其用途、实现和优点。

理解 useSyncExternalStore 的必要性

React 的内置状态管理（useState、useReducer、Context API）对于与 React 组件树紧密耦合的数据非常有效。然而，许多应用程序需要与 React 控制*之外*的数据源集成。这些外部源可以包括：

• 第三方状态管理库： 与 Zustand、Jotai 或 Valtio 等库集成。
• 浏览器 API： 访问来自 localStorage、IndexedDB 或网络信息 API 的数据。
• 从服务器获取的数据： 虽然通常首选 React Query 和 SWR 等库，但有时你可能希望直接控制。
• 其他 UI 框架： 在 React 与其他 UI 技术共存的混合应用程序中。

在 React 组件内直接读写这些外部源可能会导致问题，尤其是在并发渲染下。如果外部源在 React 准备新屏幕时发生变化，React 可能会渲染一个包含过时数据的组件。useSyncExternalStore 通过提供一种机制让 React 安全地与外部状态同步，解决了这个问题。

useSyncExternalStore 的工作原理

useSyncExternalStore Hook 接受三个参数：

1. subscribe： 一个接受回调函数的函数。每当外部 store 发生变化时，这个回调函数就会被调用。该函数应返回一个函数，该函数在被调用时会取消对外部 store 的订阅。
2. getSnapshot： 一个返回外部 store 当前值的函数。React 在渲染期间使用此函数来读取 store 的值。
3. getServerSnapshot (可选)： 一个在服务器上返回外部 store 初始值的函数。这仅在服务器端渲染 (SSR) 时是必需的。如果未提供，React 将在服务器上使用 getSnapshot。

该 Hook 返回从 getSnapshot 函数获取的外部 store 的当前值。React 确保每当 getSnapshot 返回的值发生变化时（通过 Object.is 比较确定），组件都会重新渲染。

基础示例：与 localStorage 同步

让我们创建一个简单的示例，使用 useSyncExternalStore 将一个值与 localStorage 同步。

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // 或者在服务器上从 cookie 获取 } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

在这个示例中：

• subscribe：监听 window 对象上的 storage 事件。每当 localStorage 被另一个标签页或窗口修改时，此事件就会触发。
• getSnapshot：从 localStorage 中检索 myValue 的值。
• getServerSnapshot：为服务器端渲染返回一个默认值。如果用户之前设置过一个值，这个值也可以从 cookie 中检索。
• MyComponent：使用 useSyncExternalStore 订阅 localStorage 的变化并显示当前值。

高级用例与注意事项

1. 与第三方状态管理库集成

当将 React 组件与外部状态管理库集成时，useSyncExternalStore 的优势尤为突出。让我们看一个使用 Zustand 的例子：

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // 服务器上的初始状态 ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

在这个例子中，useSyncExternalStore 用于订阅 Zustand store 的变化。注意我们如何将 useStore.subscribe 和 useStore.getState 直接传递给 Hook，这使得集成变得无缝。

2. 使用 Memoization 优化性能

由于 getSnapshot 在每次渲染时都会被调用，因此确保其性能至关重要。避免在 getSnapshot 中进行昂贵的计算。如有必要，使用 useMemo 或类似技术来 memoize getSnapshot 的结果。

考虑这个（可能有问题的）例子：

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // 大数组 listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // 昂贵的操作 ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

在这个例子中，getSnapshot（作为第二个参数传递给 useSyncExternalStore 的内联函数）对一个大数组执行了昂贵的 map 操作。这个操作将在*每次*渲染时执行，即使底层数据没有改变。为了优化这一点，我们可以 memoize 结果：

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (与之前相同) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

现在，map 操作仅在 externalStore.getState() 发生变化时才执行。注意：如果 store 修改了同一个对象，你实际上需要深度比较 externalStore.getState() 或使用不同的策略。此示例为演示而简化。

3. 处理并发渲染

useSyncExternalStore 的主要优点是它与 React 的并发渲染功能兼容。并发渲染允许 React 同时准备多个版本的 UI。当外部 store 在并发渲染期间发生变化时，useSyncExternalStore 确保 React 在将更改提交到 DOM 时始终使用最新的数据。

如果没有 useSyncExternalStore，组件可能会渲染过时的数据，导致视觉不一致和意外行为。useSyncExternalStore 的 getSnapshot 方法被设计为同步且快速的，允许 React 在渲染期间快速确定外部 store 是否已更改。

4. 服务器端渲染 (SSR) 注意事项

当在服务器端渲染中使用 useSyncExternalStore 时，提供 getServerSnapshot 函数至关重要。此函数用于在服务器上检索外部 store 的初始值。如果没有它，React 将尝试在服务器上使用 getSnapshot，如果外部 store 依赖于浏览器特定的 API（例如 localStorage），这可能是不可能的。

getServerSnapshot 函数应返回一个默认值或从服务器端源（例如 cookie、数据库）检索数据。这确保了在服务器上渲染的初始 HTML 包含正确的数据。

5. 错误处理

健壮的错误处理至关重要，尤其是在处理外部数据源时。将 getSnapshot 和 getServerSnapshot 函数包装在 try...catch 块中以处理潜在的错误。适当地记录错误并提供回退值，以防止应用程序崩溃。

6. 使用自定义 Hook 实现可重用性

为了提高代码的可重用性，请将 useSyncExternalStore 逻辑封装在自定义 Hook 中。这使得在多个组件之间共享逻辑变得更加容易。

例如，让我们为访问 localStorage 中的特定键创建一个自定义 Hook：

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

现在，你可以轻松地在任何组件中使用这个 Hook：

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

最佳实践

• 保持 getSnapshot 快速： 避免在 getSnapshot 函数中进行昂贵的计算。如有必要，memoize 结果。
• 为 SSR 提供 getServerSnapshot： 确保在服务器上渲染的初始 HTML 包含正确的数据。
• 使用自定义 Hook： 将 useSyncExternalStore 逻辑封装在自定义 Hook 中，以获得更好的可重用性和可维护性。
• 优雅地处理错误： 将 getSnapshot 和 getServerSnapshot 包装在 try...catch 块中。
• 最小化订阅： 仅订阅组件实际需要的外部 store 的部分。这可以减少不必要的重新渲染。
• 考虑替代方案： 评估 useSyncExternalStore 是否真的有必要。对于简单情况，其他状态管理技术可能更合适。

useSyncExternalStore 的替代方案

虽然 useSyncExternalStore 是一个强大的工具，但它并非总是最佳解决方案。考虑以下替代方案：

• 内置状态管理（useState、useReducer、Context API）： 如果数据与 React 组件树紧密耦合，这些内置选项通常就足够了。
• React Query/SWR： 对于数据获取，这些库提供了出色的缓存、失效和错误处理功能。
• Zustand/Jotai/Valtio： 这些极简的状态管理库提供了一种简单高效的方式来管理应用程序状态。
• Redux/MobX： 对于具有全局状态的复杂应用程序，Redux 或 MobX 可能是更好的选择（尽管它们会引入更多的样板代码）。

选择取决于你应用程序的具体需求。

结论

useSyncExternalStore 是 React 工具箱中的一个宝贵补充，它实现了与外部状态源的无缝集成，同时保持了与并发渲染的兼容性。通过理解其用途、实现和高级用例，你可以利用这个 Hook 构建健壮且高性能的 React 应用程序，有效地与来自各种来源的数据进行交互。

请记住，在选择使用 useSyncExternalStore 之前，要优先考虑性能、优雅地处理错误，并考虑替代解决方案。通过仔细的规划和实施，这个 Hook 可以显著增强你的 React 应用程序的灵活性和功能。

进一步探索

• React useSyncExternalStore 官方文档
• 各种状态管理库（Zustand、Jotai、Valtio）的示例
• useSyncExternalStore 与其他方法的性能基准比较